<template>
 
  	<!--el-row为一行进行弹性布局-->
  	<el-row type="flex" justify="center" align="middle" class="wrapper">
    <el-form ref="form" :model="form" label-width="100px" class="bgcStyle">
  <el-form-item label="用户名">
    <el-input v-model="form.username" placeholder="请输入用户名" status-icon="true"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="login">登录</el-button>
    <el-button @click="clearForm">取消</el-button>
  </el-form-item>
  </el-form>
  </el-row>
  

</template>
<script>
  export default {
    data() {
      return {
        form: {
       username:"",
       password:""
      }
    }
  },
    methods: {
     login(){
//   	console.log("这里是登录页面")
//当用户名和密码为空时
if(!this.form.username||!this.form.password){
	return this.$message.error('请输入手机号和密码');
}
     this.$axios({
	  url:"/login",
	  method:"POST",
	  data:this.form
      }).then(res=>{
      	console.log("登录测试",res);
      	const {message,data} =res.data;
      	if(message=="登录成功"){
      		this.$message({
          message: '登录成功',
          type: 'success'
        });
        localStorage.setItem("token",data.token);
        localStorage.setItem("userinfo",JSON.stringify(data.user));
//      跳转到首页
        this.$router.push("/admin");
      	}else{
      		this.$message({
          message: '用户不存在',
          type: 'error'
        });
      	}
      })
     },
     clearForm(){
     	this.form.username="";
     	this.form.password="";
     }
    }
  }
   
</script>
<style lang="less" scoped>
.wrapper{
	position: absolute;
	width:100%;
	top:0;
	bottom:0;
	background-color:#004e92;
	 }
.bgcStyle{
	background-color: #fff;
	padding:60px 80px 0 0;
	border-radius:12px;
}
	
</style>